<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>充值</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<link rel="stylesheet" href="../css/mint-ui.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>
	<body>
		<div id="app">
			<br />
			<p class="title" style="margin-top:15px;">选择充值金额(元)</p>
			<div class="selectNum">
				<span v-for="(item,index) in type" @click="checkM(index)" :class="{active:item.checked}"
					>{{item.content}}</span>
			</div>
			<br />
			<mt-field v-show="isFree" label="输入整数金额" placeholder="最低充值200" 
				v-model="moneys"></mt-field>
			<br />
			<mt-button size="large" type="primary" @click="goPay">支 付</mt-button>
			<br />
			<h5 class="title">充值说明</h5>
			<section class="explain">
				299元赠送 积木桌椅一套，畅玩30天<br />
				699元赠送 永久牌儿童自行车，畅玩90天<br />
				999元赠送  儿童安全座机，畅玩188天<br />
				1699元赠送  平衡单车一辆，畅玩365天(尊享专业陶艺、美术、乐高课程)<br />
				2999元至尊客户，畅玩666天(尊享以上所有礼品任选3样)<br />
				其他金额的自由会员将不享受礼品赠送哦
			</section>
		</div>
	</body>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/mint-ui.js" ></script>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				type:[
					{id:1,content:"月卡299",price:"299",checked:false},
					{id:2,content:"季卡699",price:"699",checked:false},
					{id:3,content:"半年卡999",price:"999",checked:false},
					{id:4,content:"年卡1699",price:"1699",checked:true},
					{id:5,content:"至尊会员",price:"2999",checked:false},
					{id:6,content:"其他金额",price:"other",checked:false}
				],
				moneys:"",//用户输入的金额
				isFree:false,
				prices:"1699",//传给后台的数值金额
				whatType:4,
				openId:""
			},
			created(){
				this.openId=localStorage.getItem("openId");
			},
			methods:{
				//选择金额点击事件
				checkM:function(index){
					let types=this.type;
					for(var i=0;i<types.length;i++){
						types[i].checked=false;
						types[index].checked=true;
						this.prices=types[index].price;//充值金额
						this.whatType=types[index].id;//充值类型
					}
					if(index==5){
						this.isFree=true;//判断是否是自己输入金额
					}else{
						this.isFree=false;
						this.moneys="";
						
					}
				},
				//支付
				goPay:function(){
					let reg=/^[0-9]*[1-9][0-9]*$/;
					if(this.prices == "other"){//单独输入金额
						if(!reg.test(this.moneys)){
							this.$toast({message:"请您输入整数",duration:1000});
							return;
						}else if(this.moneys < 200){
							this.$toast({message:"请您至少充值200元呦",duration:1000});
							return;
						}else if(this.moneys >= 200 && reg.test(this.moneys)){
							this.prices=this.moneys;
						}
					}
					axios.post('http://106.13.55.49/api/jdUseraccount/createPayOrder',{
						"amount":this.prices*100,
						"openId":this.openId
					}).then(data => {
							console.log(data);
							if(data.data.status == 200){
								let datas=data.data.data;
								let self=this;
							   WeixinJSBridge.invoke(
							      'getBrandWCPayRequest', {
							         "appId":datas.appId,     //公众号名称，由商户传入     
							         "timeStamp":datas.timeStamp,         //时间戳，自1970年以来的秒数     
							         "nonceStr":datas.nonceStr, //随机串     
							         "package":datas.packageValue,     
							         "signType":"MD5",         //微信签名方式：     
							         "paySign":datas.paySign //微信签名 
							      },
							      function(res){
							      if(res.err_msg == "get_brand_wcpay_request:ok" ){
							     		 // 使用以上方式判断前端返回,微信团队郑重提示：
							            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							            self.$toast({message:"恭喜您充值成功",duration:1500});
										setTimeout(function(){
											location.href="vip.html?openId="+self.openId;
										},2000);
							      } 
							   }); 
//								
							}else{
								this.$toast(data.data.message);return;
							}
					})
					console.log("prices:"+this.prices+"类型："+this.whatType);
					
				}
				
			}
			
		})
	</script>
</html>
